<template>
    <div class="w-screen h-screen sm:bg-sky-500 sm:pt-28">
            <KCard class="my-card">            
                <svg t="1672642278918" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3160" width="200" height="200">
                    <path d="M352 458.2V678c0 9.4 7.6 17 17 17h73.1l3.2 1.5C466 706 488.6 711 512 711c23.4 0 46-5 66.7-14.5l3.2-1.5H655c9.4 0 17-7.6 17-17V460v-1.3-3.7c0-88.4-71.6-160-160-160s-160 71.6-160 160v3.2z m-32-3.2c0-106 86-192 192-192s192 86 192 192v223c0 27.1-21.9 49-49 49h-66.2c-24 10.5-50.1 16-76.8 16-26.8 0-52.8-5.5-76.8-16H369c-27.1 0-49-21.9-49-49V460v-1.7-3.3z m238.8-32.6
                    " fill="#5AC1FD" p-id="3162"></path>
                    <circle cx="440" cy="450"  r="30" fill="#5AC1FD"></circle>
                    <circle cx="584" cy="450"  r="30" fill="#5AC1FD"></circle>
                </svg>
                <!-- <h2>登录</h2> -->
                <KForm style="max-width: 375px;" :model="LoginForm" :rules="rules" @ksubmit="Submit">
                    <KFormItem n="name">
                        <KInput title="账户" v-model="LoginForm.name"/>
                    </KFormItem>
                    <KFormItem n="password">
                        <KInput title="密码" v-model="LoginForm.password" type="password"/>
                    </KFormItem>
                    <KFormItem n="verify">
                        <KInput title="验证码" v-model="LoginForm.verify"/>
                        <div class="valicode" @click="getImage()">
                            <img :src="img" alt="验证码" />
                        </div>
                    </KFormItem>
                    <div class="tip-box">
                        <span class="route-push" @click="router.push(register)">没有账号，点击注册</span>
                        <span class="route-push" @click="router.push(forget)">忘记密码</span>
                    </div>
                    <KFormItem class="my-5">
                        <button class="container h-10 text-white font-extrabold bg-blue-600 hover:bg-blue-400">登录</button>
                    </KFormItem>
                    <div class="tip-box" style="justify-content: center;">
                        <span class="route-push">管理员通道</span>
                    </div>
                </KForm>
            </KCard>
    </div>
</template>

<script setup>
import KForm from '@/components/KForm.vue';
import KInput from '@/components/KInput.vue';
import KFormItem from '@/components/KForm_item.vue';
import { reactive, ref } from 'vue';
import KCard from '@/components/KCard.vue';
import { useRouter } from 'vue-router';
import { login,captcha } from '@/http/login';
import userStore from '@/store/userStore';
import { msgSuccess } from '@/method/quickUse';

const router = useRouter()
const register = "/register"
const forget ="/forget"
const img = ref("")
const LoginForm = reactive({
    name: "",
    password:"",
    verify: "",
})
const rules={
    name:(v)=>{
        if (v===""){
            return "必须填写账户"
        }
        else return ""
    },
    password:(v)=>{
        if (v===""){
            return "必须填写密码"
        }
        else return ""
    },
    verify:(v)=>{
        if (v===""){
            return "必须填写验证码"
        }
        else return ""
    },
}
function getImage() {
    captcha().then(res=>{
        img.value= res.image
    })
}
function Submit(check) {
    if (check){
        login(LoginForm).then(res=>{
            msgSuccess("登录成功")
            userStore().setToken(res.token)
            // userStore().getBatch()
            router.push("/")
        }).catch(res=>{
            getImage()
            LoginForm.verify = ""
            console.error(res)
        })
    }
}
getImage()
</script>

<style>
:root {
    --ki-hover: #666;
    --ki-unhover: #aaa;
    --ki-select: #5d9bfc;
    --ki-pad: .9em;
}
</style>
